<template>
  <div class="column-index overflow-hidden">
    <div class="column-header">
      <div class="header-content flex items-center pt-2 pb-2">
        <div class="mr-2">
          <img :src="currentAvatar" alt="" class="col-avatar" />
        </div>
        <div class="flex-1">
          <div class="col-title font-semibold cursor-pointer" @click="toColumnList">
            {{ columnInfo.title }}
          </div>
          <div class="text-lg truncate mt-2">{{ columnInfo.description }}</div>
        </div>
      </div>
    </div>
    <router-view></router-view>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, computed, onMounted, ref, watch } from 'vue'
import { getColumnDetail } from '@/services/ApiServer/ColumnsRequest'
import { useRoute, useRouter } from 'vue-router'
import { useGlobalStore } from '@/store/global'
interface ColumnInfo {
  title: string
  description: string
  avatar?: {
    _id: string
    url: string
  }
  [key: string]: any
}
export default defineComponent({
  name: 'columnIndex',
  setup() {
    let columnInfo: ColumnInfo = reactive({
      title: '',
      description: '',
    })
    const route = useRoute()
    const router = useRouter()
    const globalStore = useGlobalStore()
    const columnId = computed(() => {
      return route.params.columnId as string
    })
    const currentAvatar = ref(new URL('../..//assets/images/avatar.svg', import.meta.url).href)
    const getColumnInfo = async () => {
      globalStore.setLoading(true)
      const res = await getColumnDetail(columnId.value)
      if (res && res.code === 0 && res.data) {
        columnInfo.title = res.data.title
        columnInfo.description = res.data.description
        if (res.data.avatar) {
          currentAvatar.value = res.data.avatar.url
        }
      }
      globalStore.setLoading(false)
    }
    const toColumnList = () => {
      router.push(`/column/list/${columnId.value}`)
    }
    onMounted(() => {
      getColumnInfo()
    })
    watch(columnId, (val) => {
      if (val) {
        getColumnInfo()
      }
    })
    return {
      columnInfo,
      currentAvatar,
      toColumnList,
    }
  },
})
</script>

<style lang="scss" scoped>
.column-index {
  min-height: calc(100vh - 116px);
  background-color: #f6f6f6;
  .column-header {
    box-shadow: 0 1px 3px hsl(0deg 0% 7% / 10%);
    background-color: #fff;
    .header-content {
      width: 700px;
      margin: 0 auto;
      .col-title {
        font-size: 26px;
      }
      .col-avatar {
        width: 100px;
        height: 100px;
        border-radius: 2px;
        max-width: unset;
      }
    }
  }
}
</style>
